<template>
    <el-dialog v-model="dialogVisible" :title="title" :width="width" :destroy-on-close="destroyOnClose"
        :draggable="true" :close-on-click-modal="false" :close-on-press-escape="false">
        <!-- 添加一级目录按钮 -->
        <div class="mb-5">
            <el-button type="primary" @click="addCatalogDialogRef.open">
                <el-icon class="mr-1">
                    <Plus />
                </el-icon>
                添加目录</el-button>
        </div>
        <!-- 内容 -->
        <div id="accordion-flush" data-accordion="collapse"
            data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
            data-inactive-classes="text-gray-500 dark:text-gray-400">
            <h2 id="accordion-flush-heading-1" v-for="(catalog, index) in catalogs" :key="index">
                <!-- 一级目录 -->
                <button type="button" class="hover:bg-gray-100 py-3 px-3 rounded-lg flex items-center w-full font-medium rtl:text-right 
                    text-gray-500 dark:border-gray-700 dark:text-gray-400"
                    data-accordion-target="#accordion-flush-body-1" aria-expanded="true"
                    aria-controls="accordion-flush-body-1">
                    <svg data-accordion-icon class="w-3 h-3 mr-2 rotate-180 shrink-0" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 5 5 1 1 5" />
                    </svg>
                    <span v-if="!catalog.editing" class="flex items-center grow" v-html="catalog.title"></span>
                    <!-- 标题输入框 -->
                    <span v-else class="w-full">
                        <el-input v-model="catalog.title" placeholder="请输入目录标题" @blur="onEditTitleInputBlur(catalog.id)"
                            clearable />
                    </span>
                    <!-- 右侧竖着的三个点：操作图标 -->
                    <div class="hover:bg-gray-200 rounded py-2 px-2">
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                <svg t="1705472726484" class="icon w-5 h-5 outline-none" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5968" width="200"
                                    height="200">
                                    <path
                                        d="M512 298.6496a85.3504 85.3504 0 1 0 0-170.6496 85.3504 85.3504 0 0 0 0 170.6496z"
                                        fill="#707070" p-id="5969"></path>
                                    <path
                                        d="M512 512m-85.3504 0a85.3504 85.3504 0 1 0 170.7008 0 85.3504 85.3504 0 1 0-170.7008 0Z"
                                        fill="#707070" p-id="5970"></path>
                                    <path
                                        d="M512 896a85.3504 85.3504 0 1 0 0-170.7008 85.3504 85.3504 0 0 0 0 170.7008z"
                                        fill="#707070" p-id="5971"></path>
                                </svg>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item
                                        :command="{ id: catalog.id, sort: catalog.sort, action: 'rename' }">
                                        <el-icon>
                                            <EditPen />
                                        </el-icon>
                                        重命名
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        :command="{ id: catalog.id, sort: catalog.sort, action: 'addArticle' }">
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                        添加文章
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="index > 0"
                                        :command=" { id: catalog.id, sort: catalog.sort, action: 'moveUp' }">
                                        <el-icon>
                                            <Top />
                                        </el-icon>
                                        上移
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="index < catalogs.length - 1"
                                        :command=" { id: catalog.id, sort: catalog.sort, action: 'moveDown' }">
                                        <el-icon>
                                            <Bottom />
                                        </el-icon>
                                        下移
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        :command="{ id: catalog.id, sort: catalog.sort, action: 'removeFromCatalog' }"
                                        divided>
                                        <el-icon>
                                            <DocumentRemove />
                                        </el-icon>
                                        移出目录
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </button>

                <!-- 二级目录 -->
                <ul v-if="catalog.children && catalog.children.length > 0">
                    <!-- 使用VueDraggablePlus实现二级目录拖拽移动 -->
                    <VueDraggable ref="el" v-model="catalog.children" @end="onDragEnd">
                        <li class="flex items-center ps-10 py-2 pe-3 rounded-lg hover:bg-gray-100"
                            v-for="(childCatalog, childIndex) in catalog.children" :key="childIndex">
                            <span v-if="!childCatalog.editing" v-html="childCatalog.title"></span>
                            <!-- 标题输入框 -->
                            <span v-else class="w-full">
                                <el-input v-model="childCatalog.title" placeholder="请输入目录标题"
                                    @blur="onEditTitleInputBlur(childCatalog.id)" clearable />
                            </span>
                            <span class="grow"></span>
                            <!-- 重命名 -->
                            <span class="hover:bg-gray-200 rounded py-2 px-2 ml-2 mr-2"
                                @click="editTitle(childCatalog.id)">
                                <svg t="1705474417719" class="icon w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="8306" width="200" height="200">
                                    <path
                                        d="M402.24 753.12l417.984-417.952a35.552 35.552 0 0 0 0-50.304l-75.424-75.424a35.552 35.552 0 0 0-50.304 0L276.576 627.392l-8.992 134.72 134.688-8.992zM193.664 801.92l13.76-205.92L644.192 159.168a106.656 106.656 0 0 1 150.848 0l75.424 75.424a106.656 106.656 0 0 1 0 150.848L433.632 822.304l-205.92 13.728A32 32 0 0 1 193.6 801.92zM644.224 259.744l-50.272 50.24 125.696 125.76 50.272-50.304-125.696-125.696z"
                                        fill="#707070" p-id="8307"></path>
                                </svg>
                            </span>
                            <!-- 移出目录 -->
                            <el-tooltip class="box-item" effect="dark" content="移出目录" placement="right">
                                <span class="hover:bg-gray-200 rounded py-2 px-2"
                                    @click="removeArticleCatalog(childCatalog.id)">
                                    <svg t="1705473517473" class="icon w-4 h-4" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7174" width="200" height="200">
                                        <path
                                            d="M607.897867 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L575.903242 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 351.94087C639.892491 753.593818 625.61532 768.043004 607.897867 768.043004z"
                                            fill="#707070" p-id="7175"></path>
                                        <path
                                            d="M415.930119 768.043004c-17.717453 0-31.994625-14.277171-31.994625-31.994625L383.935495 383.935495c0-17.717453 14.277171-31.994625 31.994625-31.994625 17.717453 0 31.994625 14.277171 31.994625 31.994625l0 351.94087C447.924744 753.593818 433.647573 768.043004 415.930119 768.043004z"
                                            fill="#707070" p-id="7176"></path>
                                        <path
                                            d="M928.016126 223.962372l-159.973123 0L768.043004 159.973123c0-52.980346-42.659499-95.983874-95.295817-95.983874L351.94087 63.989249c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 63.989249-159.973123 0c-17.717453 0-31.994625 14.277171-31.994625 31.994625s14.277171 31.994625 31.994625 31.994625l832.032253 0c17.717453 0 31.994625-14.277171 31.994625-31.994625S945.73358 223.962372 928.016126 223.962372zM319.946246 159.973123c0-17.545439 14.449185-31.994625 31.994625-31.994625l320.806316 0c17.545439 0 31.306568 14.105157 31.306568 31.994625l0 63.989249L319.946246 223.962372 319.946246 159.973123 319.946246 159.973123z"
                                            fill="#707070" p-id="7177"></path>
                                        <path
                                            d="M736.048379 960.010751 288.123635 960.010751c-52.980346 0-95.983874-43.003528-95.983874-95.983874L192.139761 383.591466c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 480.435411c0 17.717453 14.449185 31.994625 31.994625 31.994625l448.096758 0c17.717453 0 31.994625-14.277171 31.994625-31.994625L768.215018 384.795565c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 479.231312C832.032253 916.835209 789.028725 960.010751 736.048379 960.010751z"
                                            fill="#707070" p-id="7178"></path>
                                    </svg>
                                </span>
                            </el-tooltip>
                        </li>
                    </VueDraggable>
                </ul>
            </h2>
        </div>

    </el-dialog>

    <!-- 添加目录 -->
    <FormDialog ref="addCatalogDialogRef" title="添加知识库大目录" destroyOnClose @submit="onAddCatalogSubmit">
        <el-form ref="addCatalogFormRef" :rules="rules" :model="addCatalogForm">
            <el-form-item label="标题" prop="title" label-width="80px" size="large">
                <el-input v-model="addCatalogForm.title" placeholder="请输入目录标题" clearable />
            </el-form-item>
        </el-form>
    </FormDialog>
    <!-- 添加文章到目录 -->
    <FormDialog ref="addArticle2CatalogDialogRef" title="添加文章" width="80%" confirmText="添加" destroyOnClose
        @submit="onAddArticle2CatalogSubmit">
        <div>
            <!-- 表头分页查询条件， shadow="never" 指定 card 卡片组件没有阴影 -->
            <el-card shadow="never" class="mb-5">
                <!-- flex 布局，内容垂直居中 -->
                <div class="flex items-center">
                    <el-text>文章标题</el-text>
                    <div class="ml-3 w-52 mr-5"><el-input v-model="searchArticleTitle" placeholder="请输入（模糊查询）"
                            clearable /></div>

                    <el-text>创建日期</el-text>
                    <div class="ml-3 w-30 mr-5">
                        <!-- 日期选择组件（区间选择） -->
                        <el-date-picker v-model="pickDate" type="daterange" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" size="default" :shortcuts="shortcuts" @change="datepickerChange" />
                    </div>

                    <div class="ml-3 w-15 mr-3">
                        <el-checkbox v-model="type" true-value="1" false-value="0" label="仅显示未被任何知识库收录的文章" size="large" @change="handleWikiCheckboxChange" />
                    </div>
                    <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData">查询</el-button>
                    <el-button class="ml-3" :icon="RefreshRight" @click="reset">重置</el-button>
                </div>
            </el-card>

            <el-card shadow="never">
                <!-- 分页列表 -->
                <el-table :data="tableData" border stripe v-loading="tableLoading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="45" />
                    <el-table-column prop="id" label="ID" width="50" />
                    <el-table-column prop="title" label="标题" width="380" />
                    <el-table-column prop="cover" label="封面" width="180">
                        <template #default="scope">
                            <el-image style="width: 100px;" :src="scope.row.cover" />
                        </template>
                    </el-table-column>

                    <el-table-column prop="isPublish" label="是否发布" width="100">
                        <template #default="scope">
                            <el-switch v-model="scope.row.isPublish" inline-prompt :active-icon="Check"
                                :inactive-icon="Close" disabled />
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发布时间" />
                </el-table>

                <!-- 分页 -->
                <div class="mt-10 flex justify-center">
                    <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[5, 10, 20, 50]"
                        :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
                        :total="total" @size-change="handleSizeChange" @current-change="getTableData" />
                </div>

            </el-card>
        </div>
    </FormDialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Accordion } from 'flowbite';
import { showMessage, showModel } from '@/composables/utils';
import { VueDraggable } from 'vue-draggable-plus';
import FormDialog from './FormDialog.vue';
import { getArticlePageList } from '@/api/admin/article';
import { Search, RefreshRight, Check, Close } from '@element-plus/icons-vue'
import { getWikiCatalogsById, updateWikiCatalogs } from '@/api/admin/wiki';
// 对话框是否显示
const dialogVisible = ref(false)
// 添加目录弹窗是否显示
const addCatalogDialogRef = ref(null)
// 添加目录表单是否显示
const addCatalogFormRef = ref(null)
// 确认按钮加载 loading
const btnLoading = ref(false)
// 显示 loading
const showBtnLoading = () => btnLoading.value = true
// 隐藏 loading
const closeBtnLoading = () => btnLoading.value = false

// 对外暴露属性
const props = defineProps({
    title: String,
    width: {
        type: String,
        default: '40%'
    },
    destroyOnClose:  {
        type: Boolean,
        default: false
    },
    confirmText: {
        type: String,
        default: '提交'
    }
})

// 当前所编辑知识库id
const currentEditWikiId = ref(-1)
// 打开
const open = (wikiId) => {
    dialogVisible.value = true
    console.log("知识库 ID: " + wikiId)
    currentEditWikiId.value = wikiId
    // 获取目录
    getCatalogsForWikiId(wikiId)
}
// 关闭
const close = () => dialogVisible.value = false

// 对外暴露方法
defineExpose({
    open,
    close,
    showBtnLoading,
    closeBtnLoading
})

// 添加目录表单数据
const addCatalogForm = ref({
    title: ''
})
// 校验规则
const rules = ref({
    title: [
        { required: true, message: '请输入目录标题', trigger: 'blur' }
    ]
})

// 提交目录
const updateWikiCatalogsData = () => {
    // 构造请求参数
    let params = {
        id: currentEditWikiId.value,
        catalogs: catalogs.value
    }

    // 调用后台接口
    updateWikiCatalogs(params).then((res) => {
        if (res.success == true) {
            // 重新渲染目录数据
            getCatalogsForWikiId(currentEditWikiId.value)
        } else {
            showMessage(res.message, 'error')
        }
    })
}

// 提交目录临时id
const tempId = ref(-1)
// 添加一级标题提交事件
const onAddCatalogSubmit = () => {
    addCatalogFormRef.value.validate((valid) => {
        if (!valid) {
            console.log("添加目录表单校验失败")
            return false
        }
        let lastCatalog = null;
        if (catalogs.value != null && catalogs.value.length > 0) {
            // 获取最后一个一级目录对象
            lastCatalog = catalogs.value[catalogs.value.length - 1]
        }
        
        // 构造新的目录对象
        const newCatalog = {
            id: tempId.value,
            articleId: null,
            title: addCatalogForm.value.title,
            editing: false,
            level: 1,
            sort: lastCatalog ? lastCatalog.sort + 1 : 1,
            children: []
        }
        if (catalogs.value == null || catalogs.value.length == 0) {
            //创建新的一级目录数组
            catalogs.value = []
        }
        // 添加新目录
        catalogs.value.push(newCatalog)
        // 临时id负向自增
        tempId.value -= 1
        // 关闭弹窗
        addCatalogDialogRef.value.close()
        // 将表单中的字段置空
        addCatalogForm.value.title = ''
        console.log(catalogs.value)
        // 更新知识库目录
        updateWikiCatalogsData()
    })
}

// 目录数据
const catalogs = ref([])
// 添加文章到目录对话框引用
const addArticle2CatalogDialogRef = ref(null)

// 获取知识库目录
const getCatalogsForWikiId = (wikiId) => {
    console.log("获取知识库目录：" + wikiId)
    // 构造请求参数
    let params = {
        id: wikiId
    }
    // 获取知识库目录
    getWikiCatalogsById(params).then((res) => {
        if (res.success == true) {
            catalogs.value = res.data
        } else {
            showMessage(res.message, 'error')
        }
    })
}

// 当前被编辑目录的id
const currentEditCatalogId = ref(-1)
// 一级目录，下拉暴露菜单
const handleCommand = (command) => {
    if (command.action == 'rename') {
        editTitle(command.id)
    } else if (command.action == 'removeFromCatalog') {
        removeCatalog(command.id)
    } else if (command.action == 'moveUp') {
        // 上移目录
        catalogMove(command.id, command.sort, 'up')
    } else if (command.action == 'moveDown') {
        // 下移目录
        catalogMove(command.id, command.sort, 'down')
    } else if (command.action == 'addArticle') {
        // 记录当前被编辑目录的id
        currentEditCatalogId.value = command.id
        // 弹出弹出添加文章对话框
        addArticle2CatalogDialogRef.value.open()
        // 获取文章列表
        getTableData()
    }
}

// 分页查询的分类名称
const searchArticleTitle = ref('')
// 日期
const pickDate = ref('')

//起始时间
const startDate = reactive({})
//结束时间
const endDate = reactive({})
//监听日期组件改变事件，并将开始结束时间设置到变量中    
const datepickerChange = (e) => {
    startDate.value = moment(e[0]).format('YYYY-MM-DD')
    endDate.value = moment(e[1]).format('YYYY-MM-DD')
    console.log("开始时间：" + startDate.value + " 结束时间：" + endDate.value)
}
// 是否显示未被任何知识库收录的文章（文章type）
const type = ref(null)

//近期时间
const shortcuts = [
    {
        text: '最近一天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 1)
            return [start, end]
        }
    },
    {
        text: '最近三天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 3)
            return [start, end]
        }
    },
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 7)
            return [start, end]
        }
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 30)
            return [start, end]
        }
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 90)
            return [start, end]
        }
    },
    {
        text: '最近六个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 180)
            return [start, end]
        }
    },
    {
        text: '最近一年',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 1000 * 3600 * 24 * 365)
            return [start, end]
        }
    }
]

// 重置
const reset = () => {
    pickDate.value = ''
    startDate.value = null
    endDate.value = null
    searchArticleTitle.value = ''
}

// 表格加载 Loading
const tableLoading = ref(false)
// 表格数据
const tableData = ref([])
// 当前页码，给了一个默认值 1
const current = ref(1)
// 总数据量，给了个默认值 0
const total = ref(0)
// 每页显示的数据量，给了个默认值 10
const size = ref(5)

// 获取文章分页数据
const getTableData = () => {
    // 显示表格加载动画
    tableLoading.value = true
    // 构建请求条件
    if (type.value == null || type.value != 1) type.value = null
    let params = {
        current: current.value,
        size: size.value,
        title: searchArticleTitle.value,
        startDate: startDate.value,
        endDate: endDate.value,
        type: type.value
    }
    // 调用后台文章分页查询接口，查询符合条件的文章数据列表
    getArticlePageList(params).then((res) => {
        if (res.success == true) {
            // 请求成功 文章列表信息
            tableData.value = res.data
            current.value = res.pageIndex
            total.value = res.total
            size.value = res.size
        }
    }).finally(() => {
        // 隐藏表格加载动画
        tableLoading.value = false
    })
}

// 被选择的文章
const selectionArticles = ref([])
// 表格选择事件
const handleSelectionChange = (articles) => {
    console.log(articles)
    selectionArticles.value = articles
}

const handleWikiCheckboxChange = () => {
    getTableData()
}

const handleSizeChange = (chooseSize) => {
    size.value = chooseSize
    getTableData()
}

// 将文章添加到目录
const onAddArticle2CatalogSubmit = () => {
    // 校验选中文章
    if (!selectionArticles.value || selectionArticles.value.length === 0) {
        // 提示用户
        showMessage('请选择需要添加至该目录的文章', 'warning')
        return
    }
    // 遍历目录
    for (const catalog of catalogs.value) {
        // 找到当前正在编辑的目录
        if (catalog.id == currentEditCatalogId.value) {
            // 循环添加被选中的文章
            for (const selectionArticle of selectionArticles.value) {
                // 设置文章目录标题
                let articleTitle = selectionArticle.title
                // 构建二级目录
                let newCatalog = {
                    id: tempId.value,
                    articleId: selectionArticle.id,
                    title: articleTitle,
                    editing: false,
                    level: 2,
                    sort: catalog.children == null ? 1 : catalog.children.length + 1,
                }
                // 添加到当前目录的子目录数组当中
                if (catalog.children == null) catalog.children = []
                catalog.children.push(newCatalog)
                tempId.value -= 1
            }
        }
    }
    
    // 关闭对话框
    addArticle2CatalogDialogRef.value.close()
    // 置空被选择的文章
    selectionArticles.value = []
    // 更新知识库目录
    updateWikiCatalogsData()
}

// 移动目录
const catalogMove = (catalogId, sort, action) => {
    // 获取被移动的目录
    let sourceCatalog = findCatalogById(catalogs.value, catalogId)
    // 获取目标目录
    let targetCatalog = getCatalogBySort(sort, action)

    // 没有找到目标目录
    if (targetCatalog == null) {
        console.log("未找到目标目录")
        return
    }

    // 获取各自的排序号
    let sourceSort = sourceCatalog.sort
    let targetSort = targetCatalog.sort
    // 互换排序号
    sourceCatalog.sort = targetSort
    targetCatalog.sort = sourceSort
    // 重新排序目录
    catalogs.value.sort((a, b) => a.sort - b.sort)
    console.log(catalogs.value)
    // 更新知识库目录
    updateWikiCatalogsData()
}


// 根据排序规则，得到其需要互换位置的目录
const getCatalogBySort = (sort, action) => {
    // 上移
    if (action == 'up') {
        // 拷贝原数据组
        let tempCatalogs = [...catalogs.value]
        // 找到最后一个比当前排序号小的目录
        for (let catalog of tempCatalogs.reverse()) {
            if (catalog.sort < sort) {
                return catalog
            }
        }
    } else if (action == 'down') {
        // 下移
        // 找到第一个比当前排序号大的目录
        for (let catalog of catalogs.value) {
            if (catalog.sort > sort) {
                return catalog
            }
        }
    }
    // 未找到目标目录
    return null
}

// 修改目录标题
const editTitle = (id) => {
    // 根据目录id查询对应的目录
    let targetCatalog = findCatalogById(catalogs.value, id)
    targetCatalog.editing = true
}
// 根据目录id查询对应的目录
const findCatalogById = (catalogs, id) => {
    for (let catalog of catalogs) {
        if (catalog.id == id) {
            return catalog
        }

        if (catalog.children != null && catalog.children.length > 0) {
            // 递归查找子目录
            let targetCatalog = findCatalogById(catalog.children, id)
            if (targetCatalog != null) {
                return targetCatalog
            }
        }
    }
    // 未找到目录
    return null
}

const onEditTitleInputBlur = (id) => {
    // 输入框触发blur事件后，重新展现为文本状态
    let targetCatalog = findCatalogById(catalogs.value, id)
    // 将目录的editing属性设置为false
    targetCatalog.editing = false
    // 如果标题被更新为空字符串， 则更新为默认标题，并给用户进行提示
    targetCatalog.title = targetCatalog.title !== "" ? targetCatalog.title : "未命名目录" 
    // 更新知识库目录
    updateWikiCatalogsData()
}

// 移除目录
const removeCatalog = (id) => {
    // 弹出确认框，确认是否删除目录
    showModel("确认删除目录吗？", "warning", "移除目录提示", true).then(() => {
        // 移除目录
        deleteCatalog(catalogs.value, id)
        // console.log(catalogs.value)
        // 更新知识库目录
        updateWikiCatalogsData()
    }).catch(() => {
        // 取消删除
        console.log("取消删除")
    })
}
// 删除目标目录
const deleteCatalog = (catalogs, id) => {
    for (let i = 0; i < catalogs.length; i++) {
        const curCatalog = catalogs[i]
        // 删除一级目录
        if (curCatalog.id == id) {
            // 删除当前目录
            catalogs.splice(i, 1)
            return catalogs
        }

        // 删除二级目录
        if (curCatalog.children!= null && curCatalog.children.length > 0) {
            // 递归查找子目录
            deleteCatalog(curCatalog.children, id)
        }
    }
    return catalogs
}

// 移除二级目录（文章）
const removeArticleCatalog = (id) => {
    // 弹出确认框，确认是否删除目录
    showModel("确认删除该文章目录吗？", "warning", "移除文章目录提示", true).then(() => {
        // 移除目录
        deleteCatalog(catalogs.value, id)
        // console.log(catalogs.value)
        // 更新知识库目录
        updateWikiCatalogsData()
    }).catch(() => {
        // 取消删除
        console.log("取消删除")
    })
}

// 拖拽移动二级目录后，更新知识库目录
const onDragEnd = (event) => {
    // 更新知识库目录
    updateWikiCatalogsData()
}
</script>
    
